<template>
 <!-- hbx 2022-8-18 09:36:00 游记评论后端管理 -->
	<div id="CommentList">
		<div>
			<el-row>
				<el-card class="box-card">
					<el-row>
						<el-col :span="4" style="float: left">
							<el-input placeholder="请输入用户名称" v-model="userName" clearable></el-input>
						</el-col>
						<el-col :span="4" style="float: left;margin-left:20px">
							<el-input placeholder="请输入评论所在的游记" v-model="travelsName" clearable></el-input>
						</el-col>
						<el-col :span="4" style="margin-left:20px">
                            <el-date-picker
                                v-model="time"
                                align="right"
                                type="date"
                                placeholder="选择评论发布的时间"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-col>
						<el-col :span="2" style="float: left;margin-left:20px">
							<el-button type="primary" @click="findCommentByCondition()" icon="el-icon-search" ></el-button>
						</el-col>
						<!-- <el-col :span="2">
							<el-button type="primary" @click="saveRefresh" round>刷新</el-button>
						</el-col> -->
					</el-row>
					<el-row>
						<el-card class="box-card">
						<!-- 评论列表内容展示 -->
							<el-col :span="24">
								<el-table :data="commentFrom" border style="width: 100%">
									<el-table-column fixed prop="userName" label="发布人名称" width="220">
									</el-table-column>
									<el-table-column prop="commentContent" label="发布内容" width="220">
									</el-table-column>
									<el-table-column prop="travelsName" label="游记标题" width="220">
									</el-table-column>
									<el-table-column
									prop="avatarId"
									label="头像"
									width="220">
										<template slot-scope="scope">
											<img :src='`http://127.0.0.1:8082/getImageById?id=${scope.row.avatarId}`'  style="width:70px;height:70px;">
										</template>
									</el-table-column>
									<el-table-column prop="createTime" label="发布时间" width="220">
									</el-table-column>
									<el-table-column fixed="right" label="操作" width="220">
										<template slot-scope="scope">
											<el-button @click="commentDetail(scope.row)" type="text" size="small"><i class="el-icon-view"></i>查看
												</el-button>
											<el-button type="text" @click="deleteComment(scope.row.id)" size="small"><i class="el-icon-delete"></i>删除</el-button>
										</template>
									</el-table-column>
								</el-table>
							</el-col>
						</el-card>
					</el-row>
					<!-- 查看详情弹窗 -->
					<el-dialog title="查看详情"	:visible.sync="viewCommentVisible"	width="30%"	:destroy-on-close="true">
						<el-form :model="commentFormView" label-width="100px" class="demo-ruleForm">
							<el-form-item label="发布人名称" prop="userName">
								<el-input v-model="commentFormView.userName" :disabled="true"></el-input>
							</el-form-item>
							<el-form-item label="发布内容" prop="commentContent">
								<el-input v-model="commentFormView.commentContent" :disabled="true"></el-input>
							</el-form-item>
							<el-form-item label="游记标题" prop="travelsName">
								<el-input v-model="commentFormView.travelsName" clearable style="width:80%" :disabled="true"></el-input>
							</el-form-item>
							<el-form-item label="发布时间" prop="createTime">
								<el-input v-model="commentFormView.createTime" clearable style="width:80%" :disabled="true"></el-input>
							</el-form-item>
							<el-form-item label="头像" >
								<img v-if="imageUrlView" :src="imageUrlView" class="avatar">
							</el-form-item>
						</el-form>
					</el-dialog>
					<!-- 分页 -->
					<div class="block">
						<el-row>
							<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="currentPage4"
							:page-sizes="[5, 10, 15, 20]"
							:page-size="page.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page.total">
							</el-pagination>
						</el-row>
					</div>
				</el-card>
			</el-row>
		</div>
	</div>
</template>

<script>
import icon from '@/assets/marker-icon.png'
const axios = require('axios')
export default {
	template: 'CommentList',
	data () {
		return {
			pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                    picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                    }
                }]
            },
            // 存放时间
            time:'',
			// 查看详情集合
			commentFormView:{
				id:'',
				commentContent:'',
				userName:'',
				avatarId:'',
				travelsName:'',
				createTime:'',
			},
			// 查看弹窗默认关闭
			viewCommentVisible: false,
			// 游记名字
			travelsName:'',
			// 用户名称
			userName:'',
			// 存放查询的评论
			commentFrom:[],
			// 树查询名称
			filterText: '',
			// 存放城市树信息
			data:[],
			// 分页默认页数
			currentPage4: 1,
			// 分页对象
			page: {
				pageSize: 10,
				pageNum: 1,
				total: 0
			},
			// 存放图片
			imageUrlView:'',
			// 默认审批弹窗关闭
			dialogFormVisibleEdit:false,
		}
	},
	mounted () {
		// 全查评论信息
		this.getCommentAll()
	},
	methods: {
		// 点击查看按钮时回显
		commentDetail(row){
			this.viewCommentVisible = true
			this.commentFormView = row
			this.imageUrlView='http://127.0.0.1:8082/getImageById?id='+row.avatarId
		},
		// 删除评论信息
		deleteComment (row) {
			this.$confirm(
			'此操作将永久删除该评论, 是否继续?',
			'提示',
			{
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			} // 删除提示框
			)
			.then(() => {
				axios
				.delete('http://127.0.0.1:8082/comment/deleteCommentById?id=' + row)
				.then((res) => {
					if (res.data.obj > 0) {
					this.message('删除成功', 'success')
					this.getCommentAll()
					} else {
					this.message('删除失败', 'warning')
					}
				})
			})
			.catch(() => {
				this.$message({
				type: 'info',
				message: '已取消删除'
				})
			})
		},
		//设置时间为当天时间为0:0:0
        timeSet1(value){
                var date = new Date(value); //new Date(value*1000);根据时间戳格式进行选择乘1000或否
                var timeDate;
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
                // var h =  0 + ':';
                // var m =  0 + ':';
                // var s =  0;
                timeDate = Y + M + D;
                return timeDate
        },
		// 根据条件进行模糊查询分页
		findCommentByCondition () {
			if(this.time===null){
                this.time = ''
            }
            if(this.time!==''){
                this.time = this.timeSet1(this.time)
            }
			this.page.pageNum = 1
			this.currentPage4 = 1
			axios
			.get('http://127.0.0.1:8082/comment/findCommentByCondition', {
				params: {
					pageSize: this.page.pageSize,
					pageNum: this.page.pageNum,
					travelsName: this.travelsName,
					userName: this.userName,
					createTime: this.time,
				}
			})
			.then((res) => {
				this.commentFrom = res.data.obj.content
				this.page.total = res.data.obj.total
			})
		},
		// 全查评论信息
		getCommentAll () {
			axios.get('http://127.0.0.1:8082/comment/getCommentAll', {
				params: {
					pageSize: this.page.pageSize,
					pageNum: this.page.pageNum,
				}
			})
			.then((res) => {
				this.commentFrom = res.data.obj.content
				this.page.total = res.data.obj.total
			})
		},
		handleSizeChange (ps) {
			this.page.pageSize = ps
			this.getCommentAll()
			// console.log(`每页 ${val} 条`)
		},
		handleCurrentChange (pn) {
			this.page.pageNum = pn
			this.getCommentAll()
			// console.log(`当前页: ${val}`)
		},
		// 提示消息
		message (message, type) {
			this.$message({
				message: message,
				type: type
			})
		}
	}
}
</script>

<style scoped>

</style>
